{% extends 'base.html' %}

{% load staticfiles %}

{% block content %}
    <div class="container" style="margin-top: 70px;">
        <ol class="breadcrumb">
            <li><a href="{% url 'index' %}">首页</a></li>
            <li><a href="{% url 'cookbook:cookbook_list' %}">菜谱</a></li>
            <li class="active">{{ type.name }}</li>
        </ol>
    </div>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="page-header" style="margin-top: 10px;">
                    <h4>分类</h4>
                </div>
                <ul class="nav nav-pills" role="tablist">
                    {% for menu_type in all_menu_type %}
                        <li role="presentation"
                            {% ifequal type.id menu_type.id %}class="active"{% endifequal %}>
                            <a href="{% url 'cookbook:cookbook_list_classify' menu_type.id %}">{{ menu_type.name }}
                                <span class="badge">{% if menu_type.number %}
                                    {{ menu_type.number }}{% endif %}</span>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <!-- Example row of columns -->
        <div class="col-lg-8">
            <div class="page-header">
                <h3>{{ type.name }}</h3>
            </div>
            {% for menu in menus.object_list %}
                <div class="row">
                    <div class="col-lg-3">
                        <div class="thumbnail">
                            <a href="{% url 'cookbook:cookbook_detail' menu.id %}"><img src="{{ MEDIA_URL }}{{ menu.image }}" alt="..."></a>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="detail">
                            <h3>
                                <a href="{% url 'cookbook:cookbook_detail' menu.id %}">{{ menu.name }}</a>
                            </h3>
                            <p class="subline"><a href="{% url 'cookbook:user_menu' menu.user_id %}">{{ menu.user }}</a>
                            </p>

                            <p class="subcontent">原料：{{ menu.ingredients }}</p>

                            <div class="substatus clear">
                                <span><span class="glyphicon glyphicon-eye-open"
                                            aria-hidden="true"></span>&nbsp;{{ menu.click_number }}次查看</span>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}

            <!---分页--->
            <div class="pageturn" style="text-align: center">
                <ul class="pagelist">
                    {% load i18n %}
                    <div class="pagination">
                        {% if menus.has_previous %}
                            <li class="long"><a href="?{{ menus.previous_page_number.querystring }}"
                                                class="page">上一页</a></li>
                        {% endif %}
                        {% for page in menus.pages %}
                            {% if page %}
                                {% ifequal page menus.number %}
                                    <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                {% else %}
                                    <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                {% endifequal %}
                            {% else %}
                                <li class="none"><a href="">...</a></li>
                            {% endif %}
                        {% endfor %}
                        {% if menus.has_next %}
                            <li class="long"><a href="?{{ menus.next_page_number.querystring }}">下一页</a></li>
                        {% endif %}
                    </div>
                </ul>
            </div>

        </div>
        <div class="col-lg-4">
            <div style="margin-top: 40px;">
                {% for ad in ad_image %}
                    <a href="{{ ad.url }}"><img class="img-responsive center-block"
                                                src="{{ MEDIA_URL }}{{ ad.image }}" alt="..."></a>
                {% endfor %}
            </div>
            <div class="page-header">
                <h3>热门菜品</h3>
            </div>
            <div style="margin-bottom: 20px;">
                {% for hot_menu in hot_menus %}
                    <a href="{% url 'cookbook:cookbook_detail' hot_menu.id %}" class="list-group-item ">{{ hot_menu.name }}</a>
                {% endfor %}
            </div>

        </div>

    </div> <!-- /container -->

{% endblock %}